<template>
		<u-upload
			ref="upload"
			:action="action"
			:max-size="5* 1024*1024"
			max-count="1"
			:multiple="false"
			:beforeUpload="beforeUpload"
			:custom-btn="true"
			:show-progress="false"
			:form-data="formData"
			:show-upload-list="true"
			:deletable="false"
			width="0"
			height="0"
			@on-success="onSuccess"
		>
		<u-avatar slot="addBtn" :src="vuex_user.avatar_url" size="140"></u-avatar>
		</u-upload>
</template>

<script>
	let _this = {}
	export default {
		name:"oss-upload",
		data() {
			return {
				action:'',
				formData:{},
				upFileName:''
			}
		},
		created(){
			_this= this
		},
		methods:{
			// 上传前的钩子 
			// 注意:在小程序中 this 可能会丢失
			async beforeUpload(index, list) {
				// 设置唯一文件名
				const {file}=list[0]
				// #ifdef H5
				const fileName=file.name
				console.log(fileName)
				//  #endif
				
				// 小程序拿的是path
				// #ifndef H5
				const fileName=file.path
				//  #endif
				
				// 请求API 获取token
				const ossToken = await _this.$u.api.authOssToken()
				// 设置上传域名
				_this.action = ossToken.host
				
				// 处理唯一文件名
				const suffix = fileName.slice(fileName.lastIndexOf('.'))// 获取后缀名
				const upFileName = _this.$u.guid(20)+ suffix
				
				_this.upFileName =upFileName
				
				// 额外的上传参数
				_this.formData = {
					'key' : upFileName,
					'policy': ossToken.policy,
					'OSSAccessKeyId': ossToken.accessid, 
					'success_action_status' : '200', //让服务端返回200,不然，默认会返回204
					'signature': ossToken.signature,
				}
				// console.log(ossToken)
				return true;
			},
			// 上传成功之后
		    async onSuccess(){
				// 移除预览区的区域图片
				this.$refs.upload.remove(0)
				// 请求api更新头像
				await this.$u.api.userAvatar({avatar:this.upFileName})

				// 更新缓存的用户信息
				this.$u.utils.updataUser()
				
				this.$u.toast('更新成功')
			}
		}
	}
</script>

<style>

</style>
